<script setup>
import {ref, computed, onMounted} from "vue"
import {useRouter} from "vue-router";
const router = useRouter()

const currentParentCategory = ref("all")
const isActiveCategory = computed(() => {
  return function (parentCategory) {
    return parentCategory === currentParentCategory.value
  }
})
const selectParentCategory = (value) => {
  currentParentCategory.value = value
}
const keywords = ref(null)
//计算高度
const categoryTabRef = ref(null)
const categoryTabHeight = ref(0)
const searchRef = ref(null)
const searchHeight = ref(0)

onMounted(() => {
  if (categoryTabRef.value && searchRef.value) {
    categoryTabHeight.value = categoryTabRef.value.wrapRef.getBoundingClientRect().height
    searchHeight.value = searchRef.value.getBoundingClientRect().height
  }
})
const calculateHeight = ()=>{
  return `calc(100vh - 60px - ${categoryTabHeight.value}px - ${searchHeight.value}px)`
}
</script>

<template>
  <!-- 分类导航栏 -->
  <el-scrollbar ref="categoryTabRef">
    <div class="category-tab">
      <el-dropdown class="category-tab-item">
                <span @click="selectParentCategory('all')" :class="isActiveCategory('all')?'active category-title':''">
                    全部产品
                </span>
      </el-dropdown>
      <el-dropdown class="category-tab-item">
                <span @click="selectParentCategory('CABLE')"
                      :class="isActiveCategory('CABLE')?'active category-title':''">
                    CABLE
                    <van-icon name="arrow-down"/>
                </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>PCI-e SAS</el-dropdown-item>
            <el-dropdown-item>6G Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>12G HD Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>USB 3.0 Series</el-dropdown-item>
            <el-dropdown-item>Round Cable</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown class="category-tab-item">
                <span @click="selectParentCategory('CONNECTOR')"
                      :class="isActiveCategory('CONNECTOR')?'active category-title':''">
                    CONNECTOR
                    <van-icon name="arrow-down"/>
                </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>PCI-e SAS</el-dropdown-item>
            <el-dropdown-item>6G Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>12G HD Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>USB 3.0 Series</el-dropdown-item>
            <el-dropdown-item>Round Cable</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown class="category-tab-item">
                <span @click="selectParentCategory('Terminator')"
                      :class="isActiveCategory('Terminator')?'active category-title':''">
                    Terminator
                    <van-icon name="arrow-down"/>
                </span>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>PCI-e SAS</el-dropdown-item>
            <el-dropdown-item>6G Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>12G HD Mini-SAS Series</el-dropdown-item>
            <el-dropdown-item>USB 3.0 Series</el-dropdown-item>
            <el-dropdown-item>Round Cable</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-scrollbar>
  <div ref="searchRef">
    <van-search style="margin: 0" v-model="keywords" input-align="center" :left-icon="null" right-icon="search"
                placeholder="请输入搜索关键词"/>
  </div>
  <div class="product-container" >
    <el-card style="--el-card-padding: 5px" @click="router.push('/product/1')">
      <el-image width="100%" style="border-radius: 3px"  height="140px" src="https://oss.toubutu.com/yexing/image/p1.jpg"/>
      <p class="product-name">产品名称</p>
    </el-card>
    <el-card style="--el-card-padding: 5px" @click="router.push('/product/1')">
      <el-image width="100%" style="border-radius: 3px"  height="140px" src="https://oss.toubutu.com/yexing/image/p2.jpg"/>
      <p class="product-name">产品名称</p>
    </el-card>
    <el-card style="--el-card-padding: 5px" @click="router.push('/product/1')">
      <el-image width="100%" style="border-radius: 3px"  height="140px" src="https://oss.toubutu.com/yexing/image/p3.jpg"/>
      <p class="product-name">产品名称</p>
    </el-card>
    <el-card style="--el-card-padding: 5px" v-for="item in 15" :key="item" @click="router.push('/product/1')">
      <el-image width="100%" style="border-radius: 3px"  height="140px" src="https://oss.toubutu.com/yexing/image/p2.jpg"/>
      <p class="product-name">产品名称</p>
    </el-card>
  </div>
</template>

<style scoped>
.category-tab {

  display: flex;

}

.category-tab-item {
  flex-shrink: 0;
  margin: 10px;

}

.category-title {
  font-size: 16px;
  transition: .3s;
}

.active {
  color: #F56C6C;
  font-weight: bold;
}

.product-container {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  overflow-y: scroll;
}
.product-name{
  text-align: center;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  height: 0;
}
</style>